<!-- 总账单页面 -->
<template>
	<!-- 账单明细 -->
	<teleport v-if="visibles.search && searchContainer" :to="searchContainer">
		<search-input v-model:params="params" v-bind="searchOption" />
	</teleport>
	<!-- 账单明细 -->
	<vxe-toolbar>
		<template #tools>
			<a-space :size="10">
				<div>
					总应收(付):
					<span v-color="{color: 'primary'}">{{ visibles.totalMoney }}</span>
				</div>
				<div>
					总已收(付):
					<span v-color="{color: 'danger'}">{{ visibles.occurredMoney }}</span>
				</div>
				<a-divider type="vertical" />
				<div>
					总待收(付):
					<span v-color="{color: 'warning'}">{{ visibles.notOccurredMoney }}</span>
				</div>

				<a-button type="primary" size="small" v-action="['mk_finance_ill-details_dc']" @click="exportF()">
					<download-outlined />
					导出
				</a-button>
			</a-space>
		</template>
	</vxe-toolbar>
	<vxe-table :data="list" v-bind="billTableOption" class="bill-preview-table" @cell-click="onCellClick">
		<vxe-column type="expand" title="房源地址" min-width="300" align="left">
			<template #default="{row}">{{ row.houseAddress }}</template>
			<template #content="{row}">
				<vxe-table :data="row.billList" :show-header="false">
					<vxe-column width="65">
						<template #default="{row: detail}">
							<svg-icon :icon-class="`finance-${detail.feeDirection == 1 ? 'in' : 'out'}`" />
							<span v-if="detail.feeDirection === 1" v-color="{color: 'primary'}">&nbsp;收</span>
							<span v-else v-color="{color: 'danger'}">&nbsp;付</span>
						</template>
					</vxe-column>
					<vxe-column min-width="200">
						<template #default="{row: detail}">
							{{ detail.feeSubjectValue }}:
							<span v-color="{color: 'primary'}">{{ detail.originalMoney.toLocaleString() }}</span>
							元
						</template>
					</vxe-column>
					<vxe-column width="180">
						<template #default="{row}">付款日期:{{ row.practicalTime }}</template>
					</vxe-column>
					<vxe-column width="280">
						<template #default="{row}">费用周期:{{ row.beginTime ? row.beginTime.slice(0, 10) : '' }} 至{{ row.endTime ? row.endTime.slice(0, 10) : '' }}</template>
					</vxe-column>
				</vxe-table>
			</template>
		</vxe-column>

		<vxe-column title="合同周期" min-width="200" align="center">
			<template #default="{row}">{{ row.beginTime }}~{{ row.endTime }}</template>
		</vxe-column>

		<vxe-column field="price" title="应收（付）/已收（付）" min-width="100" align="right">
			<template #default="{row}">{{ row.totalMoney + '元' }} / {{ row.occurredMoney + '元' }}</template>
		</vxe-column>

		<vxe-column field="total" title="待收（付）" min-width="100" align="right">
			<template #default="{row}">{{ row.notOccurredMoney }}元</template>
		</vxe-column>

		<vxe-column title="操作" width="100" align="center">
			<template #default="{row}">
				<a>明细</a>
			</template>
		</vxe-column>
	</vxe-table>
</template>

<script setup lang="ts">
	import {onMounted, reactive, ref, watch} from 'vue'
	import {VxeGridInstance, VxeTableProps} from 'vxe-table'
	import {DownloadOutlined} from '@ant-design/icons-vue'
	import {SearchProps} from 'yuxin-base/src/types'
	import settingApi from 'yuxin-base/src/api/setting-api'
	import {BILL_TYPE} from '@/interface/contract'

	const props = withDefaults(
		defineProps<{
			query?: any
			searchContainer?: string | boolean
		}>(),
		{
			searchContainer: '#bill_serach'
		}
	)

	const visibles = reactive({
		search: false,
		export: false,
		totalMoney: 0,
		occurredMoney: 0,
		notOccurredMoney: 0
	})

	// 查询参数
	const params = reactive<any>({
		beginTime: '',
		billType: null,

		createTime: '',
		current: 1,
		endTime: '',
		enterContractId: props.query.enterContractId,
		ids: [],
		isSearchCount: 1,
		like: '',
		order: '',
		predictTimeEnd: '',
		predictTimeStart: '',
		size: 15,
		sort: '',
		tenantId: '',
		updateTime: '',
		practicalTimeStart: '',
		practicalTimeEnd: ''
	})

	const list = ref<any>([])

	const projectList = ref<any[]>([])
	// 搜索配置
	const searchOption = reactive<SearchProps>({
		placeholder: '房源地址',
		// 搜索选项配置
		options: [
			{
				label: '账单周期',
				field: ['beginTime', 'endTime'],
				component: 'dateRange'
			},
			{
				label: '预计收付款时间',
				field: ['predictTimeStart', 'predictTimeEnd'],
				component: 'dateRange'
			},
			{
				label: '账单完成时间',
				field: ['practicalTimeStart', 'practicalTimeEnd'],
				component: 'dateRange'
			},
			{label: '账单类型', field: 'billType', component: 'tag', list: BILL_TYPE}
		],
		onSearch() {
			getGeneralLedgerF()
		}
	})

	onMounted(() => {
		visibles.search = true

		getGeneralLedgerF()
	})

	const allBillParams = reactive<any>({
		billIds: ''
	})

	// 表头
	const grid = ref<VxeGridInstance>()

	const billTableOption = reactive<VxeTableProps>({
		size: 'medium',
		rowConfig: {
			isHover: true
		},
		expandConfig: {
			trigger: 'row',
			showIcon: false
		},
		showFooter: false
	})

	// 明细列表
	const getGeneralLedgerF = () => {
		settingApi.getGeneralLedger(params).then((res: any) => {
			list.value = res.data || []
			res.data.forEach((e: any) => {
				visibles.totalMoney += Number(e.totalMoney)
				visibles.occurredMoney += Number(e.occurredMoney)
				visibles.notOccurredMoney += Number(e.notOccurredMoney)
			})
		})
	}

	// 账单明细列表
	const onCellClick = (data: any) => {
		allBillParams.billIds = data.row.billIds

		settingApi.getAllBillDetails(allBillParams).then((res: any) => {
			data.row.billList = res.data
		})
	}

	// 导出
	const exportF = () => {
		settingApi.exportGeneralLedger(params).then((res: any) => {
			const blob = new Blob([res], {
				type: 'application/vnd.ms-excel;charset=utf-8'
			})
			const link = document.createElement('a')
			link.href = window.URL.createObjectURL(blob)
			link.download = '总账单明细 .xls'
			link.click()
		})
	}
</script>

<style lang="less">
	.bill-preview-table {
		.vxe-body--expanded-column {
			border: none;

			.vxe-table--body-wrapper {
				margin-top: -1px;
				background: rgba(@primary-color, 0.05);

				.vxe-body--column {
					vertical-align: baseline;
				}
			}

			.svg-icon {
				width: 24px;
			}

			.bill-carry-forward-tips {
				left: 4px;
				position: relative;

				&:before {
					content: '';
					width: 8px;
					height: 8px;
					top: 6px;
					left: -4px;
					display: inline-block;
					position: absolute;
					transform: rotate(45deg);
					border: 1px solid transparent;
					background-color: inherit;
					border-left-color: inherit;
					border-bottom-color: inherit;
					border-radius: @border-radius-base;
				}
			}
		}
	}
</style>
